<template>
  <el-dialog title="添加信息" :visible.sync="addInfoDialogVisible" @close="closeDialog">
  <el-form :model="addInfoForm" label-width="80px">
    <el-form-item label="类别:">
       <el-select v-model="addInfoForm.category" placeholder="请选择分类">
        <el-option :label="item.category_name" :value="item.id" v-for="item in cate" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="标题:">
     <el-input v-model="addInfoForm.title"></el-input>
    </el-form-item>
    <el-form-item label="概况:">
     <el-input v-model="addInfoForm.content"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addInfoDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
import { reactive, ref, watch } from '@vue/composition-api'
import { addInfo, editInfo } from '@/api/info.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    cate: {
      type: Array,
      default: () => []
    },
    getInfo: {
      type: Function,
      default: function () {}
    },
    type: {
      type: String,
      default: ''
    },
    infoItem: {
      type: Object,
      default: () => {}
    }
  },
  setup (props, { emit, root }) {
    // 对话框显示与隐藏
    const addInfoDialogVisible = ref(props.visible)
    const closeDialog = () => {
      emit('close')
      resetForm()
    }
    watch(props, () => {
      addInfoDialogVisible.value = props.visible
      if (props.type === 'edit') {
        addInfoForm.category = props.infoItem.categoryId
        addInfoForm.title = props.infoItem.title
        addInfoForm.content = props.infoItem.content
      }
    })
    // 表单操作
    const addInfoForm = reactive({
      category: '',
      title: '',
      content: ''
    })
    const loading = ref(false)
    // 重置表单
    const resetForm = () => {
      addInfoForm.category = ''
      addInfoForm.title = ''
      addInfoForm.content = ''
    }
    // 提交表单
    const submitForm = async () => {
      if (!addInfoForm.category) {
        return root.$message({
          type: 'error',
          message: '分类不能为空'
        })
      }
      loading.value = true
      if (props.type === 'add') {
        const requestParams = { ...addInfoForm }
        const { data: res } = await addInfo(requestParams)
        if (res.resCode === 0) {
          root.$message({
            type: 'success',
            message: res.message
          })
          closeDialog()
          props.getInfo()
        }
      } else {
        const requestParams = {
          id: props.infoItem.id,
          categoryId: addInfoForm.category,
          title: addInfoForm.title,
          content: addInfoForm.content
        }
        console.log(requestParams)
        const { data: res } = await editInfo(requestParams)
        if (res.resCode === 0) {
          root.$message({
            type: 'success',
            message: res.message
          })
          closeDialog()
          props.getInfo()
        }
      }
      loading.value = false
    }
    return {
      addInfoDialogVisible,
      addInfoForm,
      closeDialog,
      submitForm,
      loading
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
